<template>
 <div>
  <button @click="change(item)" v-for="item in data"  :key="item.name">
  {{item.name}}
  </button>
  <component :is="current.comName"></component>
 </div>
</template>
<script setup lang='ts'>
import {reactive,markRaw} from 'vue'
import A from './components/a.vue'
import B from './components/b.vue'

type Tabs = {
  name: string,
  comName: any 
}
type Com = Pick<Tabs,'comName'>

const data = reactive<Tabs[]>([
{
  name:'我是A组件',
  comName:markRaw(A)
},
{
  name:'我是B组件',
  comName:markRaw(B)
}
])

// 默认初始展示组件A
let current = reactive<Com>({
  comName:data[0].comName
})
//切换事件
const change =(item:Tabs)=>{
 current.comName = item.comName
}

</script>
<style scoped lang='scss'>
</style>